<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:h="http://java.sun.com/jsf/html"  
      xmlns:f="http://java.sun.com/jsf/core"  
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:t="http://myfaces.apache.org/tomahawk">  

    <ui:composition template="/templates/layout.xhtml">
        <ui:define name="content">            
            <div class="block">
                <div class="navbar navbar-inner block-header">
                    <div class="muted pull-left">GIÁO VIÊN</div>
                </div>
                <div class="block-content collapse in">

                    <div class="form-horizontal">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist" id="teacherDetalTab">
                            <li  class="#{(teacherManageBean.indexTab=='1')?'active':''}"><a href="#homeTab" id="idxTabHome" role="tab" data-toggle="tab"><i class="icon-user"></i>Home</a></li>
                            <li  class="#{(teacherManageBean.indexTab=='2')?'active':''}"><a href="#classTab" id="idxTabClass" role="tab" data-toggle="tab"><i class="icon-music"></i>Class</a></li>
                            <li  class="#{(teacherManageBean.indexTab=='3')?'active':''}"><a href="#recordedTab" id="idxTabRecorded" role="tab" data-toggle="tab"><i class="icon-th-list"></i>History</a></li>

                        </ul>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div class="tab-pane active" id="homeTab">
                                <div class="span12">
                                    <fieldset>
                                        <legend><h:outputText value="THÔNG TIN CÁ NHÂN"/></legend>
                                    </fieldset>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" for="txtLastName"><h:outputText value="Họ:"/> </label>
                                    <div class="controls">
                                        <h:inputText styleClass="span4" id="txtLastName" rendered="#{teacherManageBean.isView}"  disabled="true" value="#{teacherManageBean.teacher.lastName}"/>
                                        <h:inputText styleClass="span4" id="txtLastNameU" rendered="#{!teacherManageBean.isView}"  value="#{teacherEntity.lastName}"/>
 
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" for="txtFirstName"><h:outputText value="Tên:"/> </label>
                                    <div class="controls">
                                        <h:inputText styleClass="span3" id="txtFirstName" rendered="#{teacherManageBean.isView}"  disabled="true" value="#{teacherManageBean.teacher.firstName}"/>
                                        <h:inputText styleClass="span3" id="txtFirstNameU" rendered="#{!teacherManageBean.isView}" value="#{teacherEntity.firstName}"/>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" for="txtMobile"><h:outputText value="SĐT:"/><i class="icon-headphones"></i> </label>
                                    <div class="controls">
                                        <h:inputText styleClass="span3" id="txtMobile" rendered="#{teacherManageBean.isView}" disabled="true" value="#{teacherManageBean.teacher.mobile}" />
                                        <h:inputText styleClass="span3" id="txtMobileU" rendered="#{!teacherManageBean.isView}" value="#{teacherEntity.mobile}" />
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" for="txtEmail"><h:outputText value="Email:"/></label>
                                    <div class="controls">
                                        <h:inputText styleClass="span3" id="txtEmail" rendered="#{teacherManageBean.isView}" disabled="true"  value="#{teacherManageBean.teacher.email}" />
                                        <h:inputText styleClass="span3" id="txtEmailU" rendered="#{!teacherManageBean.isView}" value="#{teacherEntity.email}" />
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" for="txtNote"><h:outputText value="Ghi Chú:"/></label>
                                    <div class="controls">
                                        <h:inputTextarea styleClass="span3" id="txtNote" rendered="#{teacherManageBean.isView}" disabled="true" value="#{teacherManageBean.teacher.note}" />
                                        <h:inputTextarea styleClass="span8" id="txtNoteU" rendered="#{!teacherManageBean.isView}" value="#{teacherEntity.note}" />
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <t:commandLink styleClass="btn btn-primary" rendered="#{!teacherManageBean.isView}" action="#{teacherManageBean.updateTeacher}">Lưu</t:commandLink>
                                    <button type="reset" class="btn" onclick="window.history.back()">Hủy</button>
                                </div>
                            </div>
                            <div class="tab-pane " id="classTab">
                                <t:div styleClass="block-content collapse in">
                                    <t:div styleClass="span12">
                                        <t:dataTable id="tblPipul" value="#{courseTeacherBean.pageData}" var="cursor" styleClass="table table-hover"
                                                     preserveSort="true" rows="5" sortColumn="#{courseTeacherBean.sort}" sortAscending="#{courseTeacherBean.sortAscending}"
                                                     >
                                            <t:column>
                                                <f:facet name="header">
                                                    <t:commandSortHeader columnName="ui.courseID" arrow="true" styleClass="sortColumn">
                                                        <h:outputText value="Mã Lớp"/>
                                                    </t:commandSortHeader>
                                                </f:facet>
                                                <h:outputText value="#{cursor.ui.courseID}">
                                                </h:outputText>
                                            </t:column>
                                            <t:column>
                                                <f:facet name="header">
                                                    <t:commandSortHeader columnName="ui.courseName" arrow="true" styleClass="sortColumn">
                                                        <h:outputText value="Giảng Dạy Lớp"/>
                                                    </t:commandSortHeader>
                                                </f:facet>
                                                <h:outputText value="#{cursor.ui.courseName}"/>
                                            </t:column>
                                            <t:column>
                                                <f:facet name="header">
                                                    <t:commandSortHeader columnName="ui.level" arrow="true" styleClass="sortColumn">
                                                        <h:outputText value="Level"/>
                                                    </t:commandSortHeader>
                                                </f:facet>
                                                <h:outputText value="#{cursor.ui.level}">
                                                </h:outputText>
                                            </t:column>
                                            <t:column>
                                                <f:facet name="header">
                                                    <t:commandSortHeader columnName="ui.schedule" arrow="true" styleClass="sortColumn">
                                                        <h:outputText value="Lịch Học"/>
                                                    </t:commandSortHeader>
                                                </f:facet>
                                                <h:outputText value="#{cursor.ui.schedule}">
                                                </h:outputText>
                                            </t:column>
                                             <t:column>
                                                <f:facet name="header">
                                                    <t:commandSortHeader columnName="ui.startedDate" arrow="true" styleClass="sortColumn">
                                                        <h:outputText value="Thời Gian Bắt Đầu"/>
                                                    </t:commandSortHeader>
                                                </f:facet>
                                                <h:outputText value="#{cursor.ui.startedDate}">
                                                </h:outputText>
                                            </t:column>


                                            <f:facet name="footer">
                                                <div styleClass="pagination pagination-left">

                                                </div>
                                                <t:div styleClass="pagination pagination-right">
                                                    <ul>
                                                        <li>
                                                            <t:commandLink  value="Previous"
                                                                            disabled="#{!courseTeacherBean.hasPreviousPage}"
                                                                            action="#{courseTeacherBean.previousPage}"/>
                                                        </li>

                                                        <li>
                                                            <t:commandLink  value="Next"
                                                                            disabled="#{!courseTeacherBean.hasNextPage}"
                                                                            action="#{courseTeacherBean.nextPage}" />
                                                        </li>
                                                        <li class="active"> <a href="#"><t:outputText value="#{courseTeacherBean.rowCount} row(s)"/></a>
                                                        </li>
                                                    </ul>
                                                </t:div>
                                            </f:facet>
                                        </t:dataTable>

                                    </t:div>
                                </t:div>
                            </div>
                            <div class="tab-pane" id="recordedTab">Test3</div>

                        </div>
                    </div>

                </div>
            </div>
            <h:inputHidden value="#{teacherManageBean.indexTab}" id="idxTab"/>
            <script>
                $("a[data-toggle='tab']").click(function() {
                    //alert("TEST");
                    var href = $(this).attr('href');
                    if (href == "#homeTab") {
                        $("#ppsForm\\:idxTab").val(1);
                    } else if (href == "#classTab") {
                        $("#ppsForm\\:idxTab").val(2);
                    } else if (href == "#recordedTab") {
                        $("#ppsForm\\:idxTab").val(3);
                    }

                });

                $(document).ready(function() {



                    if ($("#ppsForm\\:idxTab").val() == 1) {
                        $('#teacherDetalTab li:eq(0) a').tab('show');
                        $('#teacherDetalTab li:eq(0) a').tab('show');
                    } else if ($("#ppsForm\\:idxTab").val() == 2) {
                        $('#teacherDetalTab li:eq(0) a').tab('show');
                        $('#teacherDetalTab li:eq(1) a').tab('show');
                    } else if ($("#ppsForm\\:idxTab").val() == 3) {
                        $('#teacherDetalTab li:eq(0) a').tab('show');
                        $('#teacherDetalTab li:eq(2) a').tab('show');
                    }


                });
            </script>
        </ui:define>
    </ui:composition>        

</html>  